<template>
  <u-popup
    v-model="showPop"
    :safe-area-inset-bottom="true"
    mode="bottom"
    height="882rpx"
    :closeable="true"
    @close="handleClose"
  >
    <view class="resume-type-container">
      <view class="pop-title">
        <view class="pop-title-text">选择专业</view>
        <view></view>
      </view>
      <scroll-view scroll-y="true" class="resume-list">
        <template v-if="majorList.length > 0">
          <view
            v-for="(item, index) in majorList"
            class="resume-list-item"
            @click="handleSelectMajor(item)"
            :key="index"
          >
            <view class="resume-list-item-main">
              <view class="resume-list-item-main-left">
                <view class="title">
                  {{ item.zye || '' }}
                </view>
                <view class="date">
                  <text class="school">{{ item.school || '-' }}</text>
                  <text class="line"></text>
                  <text class="major">{{ getName(item.eduId) }}</text>
                  <text class="line"></text>
                  <text class="date-range">{{
                    `${item.startdatev2 || '-'}-${item.stopdatev2 || '-'}`
                  }}</text>
                </view>
              </view>
              <view class="resume-list-item-main-right">
                <image
                  class="delete-icon"
                  :src="deleteResume"
                  @click.stop="handleDelete(item)"
                ></image>
                <image
                  class="right-arrow"
                  :src="rightArrow"
                  @click.stop="handleEditMajor(item)"
                ></image>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="no-data">
            <image :src="noData" class="no-data-img"></image>
            <text class="text">暂无数据，请点击下方按钮新增教育背景</text>
          </view>
        </template>
      </scroll-view>
      <view class="footer">
        <!-- <view
          v-if="majorList.length > 0"
          :class="['btn', selectedId ? 'active' : '']"
          @click="handleConfirm"
          >确定</view
        > -->
        <view
          :class="['btn', 'mt24', isActive ? 'active' : '']"
          @click="handleAddEducation"
          >新增教育背景</view
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
import { deleteEducation } from '@/api/index';
import { eduList } from '@/utils/data';
import { getResumeData } from '@/api/modules/career';
export default {
  name: 'MajorListPopup',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
        this.getResumeDataFn();
      }
      this.showPop = val;
    }
  },
  data() {
    return {
      showPop: false,
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      appendixImg: this.$imgBaseSelf + 'resume/appendix_new.svg',
      majorList: [],
      selectedId: '',
      selectedItem: '',
      enclosureUnSelect: this.$imgBase + 'resume/enclosureUnSelect_new.svg',
      enclosureSelected: this.$imgBase + 'resume/enclosureSelected_new.svg',
      deleteResume: this.$imgBase + 'resume/delete_resume.png',
      rightArrow: this.$imgBase + 'career/right-arrow.png',
      noData: this.$imgBaseSelf + 'resume/no_data_resume.png',
      content: '使用简历附件分析，会覆盖当前的在线简历信',
      contentStyle: {
        fontWeight: '600',
        fontSize: '36rpx',
        color: '#000000',
        lineHeight: '50rpx'
      },
      eduList: eduList,
      isActive: false
    };
  },
  methods: {
    handleDelete(item) {
      // if (this.majorList.length <= 1) {
      //   uni.showToast({
      //     title: '至少保留一个专业',
      //     icon: 'none',
      //     duration: 1500
      //   });
      //   return;
      // }
      uni.showModal({
        title: '温馨提示',
        content: `确认删除专业？`,
        success: (res) => {
          if (res.confirm) {
            const params = {
              array: JSON.stringify({
                personId: this.personId,
                edusId: item.edusId
              })
            };
            deleteEducation(params).then((res) => {
              if (res.code == 200) {
                this.getResumeDataFn();
                uni.setStorageSync('resumeUpdated', true); //设置一个标识，在resumeAssesment如果为true才会请求接口
                uni.showToast({
                  icon: 'none',
                  title: '删除成功',
                  duration: 1500
                });
              } else {
                uni.showToast({ icon: 'none', title: res.status_desc });
              }
            });
          }
        }
      });
    },
    getName(val) {
      const temp = this.eduList.find((item) => item.value == val);
      return temp ? temp.label : '';
    },
    async getResumeDataFn() {
      let param = {
        personId: this.personId,
        conditionArr: JSON.stringify({
          is_mp: 1
        })
      };
      const res = await getResumeData(param);
      if (res.code == 200) {
        this.majorList = res.data.personEdusArr || [];
        this.isActive = this.majorList.length <= 0;
      }
    },
    handleConfirm() {
      if (!this.selectedId) {
        uni.showToast({ title: '请先选择专业', icon: 'none', duration: 1500 });
        return;
      }
      if (!this.selectedItem.zye) {
        uni.showToast({
          title: '专业未填写，请选择其他专业或者新增教育背景',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      const temp = { major: this.selectedItem.zye };
      this.$emit('emitParams', JSON.stringify(temp));
    },
    handleEditMajor(item) {
      uni.navigateTo({
        url: `/pagesSub/newResume/education/index?id=${item.edusId}`
      });
      this.$emit('close', JSON.stringify(this.selectedItem));
    },
    handleSelectMajor(item) {
      this.selectedId = item.edusId;
      this.selectedItem = item;
      if (!this.selectedItem.zye) {
        uni.showToast({
          title: '专业未填写，请先编辑专业或者新增教育背景',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      const temp = { major: this.selectedItem.zye };
      this.$emit('emitParams', JSON.stringify(temp));
    },
    handleClose() {
      this.selectedId = '';
      this.selectedItem = '';
      this.$emit('close');
    },
    handleAddEducation() {
      uni.navigateTo({ url: '/pagesSub/newResume/education/index' });
      this.$emit('close', JSON.stringify(this.selectedItem));
    }
  }
};
</script>

<style lang="scss" scoped>
.resume-type-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .pop-title {
    color: #222222;
    .left-arrow {
      padding: 32rpx;
    }
    .pop-title-text {
      padding: 32rpx 0;
      margin-left: -64rpx;
      font-weight: 600;
      font-size: 36rpx;
      text-align: center;
    }
  }
  .resume-list {
    margin: 0 32rpx 0 32rpx;
    position: relative;
    height: 530rpx;
    width: calc(100% - 64rpx);
    &-item {
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      &-main {
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        padding: 32rpx 0 32rpx 32rpx;
        flex: 1;
        border-radius: 16rpx;
        &-left {
          margin-right: 24rpx;
          image {
            width: 68rpx;
            height: 68rpx;
            margin-top: 4rpx;
          }
        }
        &-left {
          flex: 1;
          width: 0;
          .title {
            width: 420rpx;
            font-size: 32rpx;
            color: #333333;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 12rpx;
          }
          .date {
            font-size: 26rpx;
            color: #888888;
            display: flex;
            align-items: center;
            .school {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            .line {
              width: 2rpx;
              height: 24rpx;
              border: 2rpx solid #979797;
              margin: 0 24rpx;
            }
            .major,
            .date-range {
              flex-shrink: 0;
            }
          }
        }
        &-right {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0 0 20rpx;
          .delete-icon {
            width: 56rpx;
            height: 56rpx;
          }
          .right-arrow {
            width: 32rpx;
            height: 32rpx;
            padding: 26rpx 26rpx 26rpx 14rpx;
          }
        }
      }
      &-select {
        margin-left: 18rpx;
        image {
          width: 47rpx;
          height: 47rpx;
        }
      }
    }
    .no-data {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .no-data-img {
        width: 360rpx;
        height: 360rpx;
        margin-bottom: 24rpx;
      }
      .text {
        font-size: 28rpx;
        color: #888888;
        line-height: 40rpx;
      }
    }
  }
  .footer {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      height: 80rpx;
      line-height: 80rpx;
      width: calc(100% - 64rpx);
      border-radius: 12rpx;
      background: #f5f5f5;
      color: #555;
      text-align: center;
    }
    .active {
      background: #f75a3e;
      color: #fff;
    }
    .mt24 {
      margin-top: 24rpx;
    }
  }
}
</style>
